<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>登录/注册</title>
    <link rel="icon" href="../static/img/logo2.png" type="image/png">
    <script src="../static/js/ku/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../static/css/ku/bootstrap.css">
    <link rel="stylesheet" href="../static/css/daohang.css">
    <script src="../static/js/ku/jquery.min.js"></script>
    <script src="../static/js/ku/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/css/register.css">
    <script type="text/javascript">
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        var code = ""; //验证码
        var codeLength = 6;//验证码长度
        function sendMessage(a) {
            curCount = count;
            if (a == 1) {
                phone = $("#inpphone").val();//用户电话号码
                $("#a1").attr("disabled", "true");
                $("#a1").html('重新获取(' + curCount + ')');
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
            }
            else {
                phone = $("#inpphone1").val();//用户电话号码
                $("#a3").attr("disabled", "true");
                $("#a3").html('重新获取(' + curCount + ')');
                InterValObj = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
            }
//向后台发送处理数据
            $.ajax({
                type: "POST", //用POST方式传输
                url: '/verification/', //目标地址
                data: {'phone': phone, 'type': a},
                async: false,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                success: function (msg) {
                    if (msg == 2) {
                        $("#error1").fadeIn(100);
                        return1 = 1
                    }
                    else {
                        $("#error1").fadeOut(100);
                        return1 = 0
                    }

                }
            });
            return return1
        }

        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#a1").html('<span onclick="sendMessage(1)" style="color: black"">重新获取<span>');
            }
            else {
                curCount--;
                $("#a1").html('重新获取(' + curCount + ')');
            }
        }

        function SetRemainTime1() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#a3").html('<span onclick="sendMessage(2)" style="color: black"">重新获取<span>');
            }
            else {
                curCount--;
                $("#a3").html('重新获取(' + curCount + ')');
            }
        }

        function verificationCode(a) {
            if (a == 1) {
                Telephone = document.getElementById("inpphone").value;
                verification = document.getElementById("ver1").value;
            }
            else {
                Telephone = document.getElementById("inpphone1").value;
                verification = document.getElementById("ver2").value;
            }
            $.ajax({
                type: "POST", //用POST方式传输
                dataType: "text", //数据格式:JSON
                url: '/verver/', //目标地址
                data: {'phone': Telephone, 'ver': verification, 'type': a},
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('服务器错误，请稍后再试。')
                },
                success: function (msg) {
                    if (msg == '1') {
                        if (a == '1') {
                            $("#box").css({
                                'marginLeft': -960
                            })
                        }
                        else {
                            $("#box").css({
                                'marginLeft': -1280
                            })
                        }
                    }
                    else if (msg == '2') {
                        if (a == '1') {
                            document.getElementById("yanerr1").innerHTML = '验证码已过期，请重新获取。';
                            document.getElementById("yanerr1").fadeIn(100);

                        }
                        else {
                            document.getElementById("yanerr2").innerHTML = "验证码已过期，请重新获取。";
                            document.getElementById("yanerr2").fadeIn(100);
                        }
                    }
                    else {
                        if (a == '1') {
                            yanerr1 = document.getElementById("yanerr1");
                            $("#yanerr1").fadeIn(100);
                            yanerr1.innerHTML = '验证码错误，请重新输入';
                        }
                        else {
                            document.getElementById("yanerr2").innerText = "验证码错误，请重新输入";
                            document.getElementById("yanerr2").fadeIn(100);
                        }
                    }
                }
            });
            if (a == 1) {
                $("#tele1").html(Telephone);
                $("#zcphone").val(Telephone)
            }
            else {
                $("#tele2").html(Telephone)
                $("#czphone").val(Telephone)
            }
        }

        $(document).ready(function () {
            $('#dsubmit').click(function () {
                phone = $('#dphone').val();
                pass = $('#dpass').val();
                url=document.referrer;
                html = $.ajax({
                    url: "/signin/",
                    type: 'POST',
                    data: {'phone': phone, 'pass': pass},
                    success: function (msg) {
                        if (msg == 1) {
                            window.location.href = url;
                        }
                        else {
                            $("#dpasserr").fadeIn(100)
                        }
                    }
                });
            })

        })
    </script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cla1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <img src="../static/img/logo1.png" alt="">
    <div class="collapse navbar-collapse" id="cla1">
        <ul class="navbar-nav" style="margin: 0 10px 0 auto">
            <li class="nav-item">
                <a class="nav-link" href="/homepage/">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/search/">目的地</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    旅游攻略
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/travels/">游记</a>
                    <a class="dropdown-item" href="/list/">榜单</a>
                    <a class="dropdown-item" href="/recommend/">景点推荐</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    社区
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/qa/">问答</a>
                    <a class="dropdown-item" href="/companions/">结伴</a>
                </div>
            </li>
            {% if request.session.is_login %}     
                <li class="nav-item"><a href="/house/" class="nav-link">{{ request.session.user_name }}</a></li>
                <li class="nav-item"><a href="/logout/" class="nav-link">注销账号</a></li>
            {% else %}
                <li class="nav-item"><a href="/signin/" class="nav-link" style="background: rgb(0,104,183);border-radius: 5px">登录/注册</a></li>
            {% endif %}
        </ul>
    </div>
</nav>
<div id="divbg">
    <div class="login-banner" style="height: 180px"></div>
    <div id="divbox">
        <div style="text-align:center">
            <img src="../static/img/logo1.png" alt="" style="margin: 20px auto">
        </div>
        <div class="login-box">
            <div class="box-con tran" id="box">
                <div class="login-con f-l">
                    登录
                    <div class="form-group">
                        <input type="text" placeholder="手机号码" onblur="verify.verifyMobile(this)" id="dphone">
                        <span class="error-notic">手机号码不正确</span>
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="密码" id="dpass">
                        <span class="error-notic" id="dpasserr">密码不正确</span>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="tran pr">
                            <a href="javascript:;" class="tran" id="dsubmit">登录</a>
                        </button>
                    </div>
                    <div class="from-line"></div>
                    <table>
                        <tr>
                            <td>
                                <div class="form-group" style="width: 150px">
                                    <a href="javascript:;" class="move-signup a-tag tran blue-border">免费注册<i
                                            class="iconfont tran">&#xe606;</i></a>

                                </div>
                            </td>
                            <td>
                                <div class="form-group" style="width: 150px">
                                    <a href="javascript:;" class="move-reset a-tag tran">忘记密码<i
                                            class="iconfont tran">&#xe606;</i></a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="signup f-l">
                    注册
                    <div class="form-group">
                        <div class="signup-form">
                            <input type="text" placeholder="注册手机号" class="mobile"
                                   onblur="verify.verifyMobile(this)" id="inpphone">
                        </div>
                        <span class="error-notic">手机号格式不正确</span>
                    </div>
                    <div class="signup-tel">
                        <div class="signup-form" id="message-inf" style="display:none">
                            <input type="text" placeholder="短信验证码" style="width:180px;"
                                   onblur="verify.VerifyCount(this)" id="ver1">
                            <a href="javascript:" class="reacquire" id="a1">重新获取（59）</a>
                            <p><span id="yanerr1" style="color: red"></span></p>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran get-message pr">
                                <a href="javascript:" class="tran" id="a2">获取短信验证码</a>
                            </button>
                        </div>
                    </div>
                    <div class="from-line"></div>
                    <div class="form-group">
                        <a href="javascript:;" class="move-login a-tag tran blue-border">已有帐号？登录<i
                                class="iconfont tran">&#xe606;</i></a>
                    </div>
                </div>

                <div class="signup f-l">
                    忘记密码
                    <div class="form-group">
                        <div class="signup-form">
                            <input type="text" placeholder="注册手机号" class="email-mobile"
                                   onblur="verify.verifyMobile(this)" id="inpphone1">
                        </div>
                        <span class="error-notic">手机号格式不正确</span>
                        <span id="error1" style="display: none">手机号码不存在</span>
                    </div>
                    <div class="signup-tel">
                        <div class="signup-form" id="message-inf1" style="display:none">
                            <input type="text" placeholder="短信验证码" style="width:180px;"
                                   onblur="verify.VerifyCount(this)" id="ver2">
                            <a href="javascript:" class="reacquire" id="a3">重新获取（60）</a>
                            <p><span id="yanerr2" style="color: red"></span></p>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran pr" id='bu12'>
                                <a href="javascript:" class="tran" id="a4">获取短信验证码</a>
                            </button>
                        </div>
                    </div>
                    <div class="from-line"></div>
                    <div class="form-group">
                        <a href="javascript:;" class="move-login a-tag tran blue-border">已有帐号？登录<i
                                class="iconfont tran">&#xe606;</i></a>
                    </div>
                </div>

                <div class="mobile-success f-l">
                    完善信息
                    <p>手机号 <span id="tele1"></span> 验证成功</p>
                    <p>请完善您的账号信息</p>
                    <form action="/register/" method="post">
                        <div class="form-group">
                            <input type="text" name="type" style="display: none" value="2">
                            <input type="text" name="zcphone" style="display: none" id="zcphone">
                            <input type="text" placeholder="您的名字" name="zcname">
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="密码（字母、数字，至少6位）" minlength="6" name="zcpass"/>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran pr">注册
                            </button>
                        </div>
                    </form>
                    <p class="view-clause">点击注册，即同意我们的 <a href="#">用户隐私条款</a></p>
                </div>

                <div class="mobile-success f-l">
                    重置密码
                    <p>手机号 <span id="tele2"></span> 验证成功</p>
                    <form action="/register/" method="post">
                        <div class="form-group">
                            <input type="text" name="type" style="display: none" value="1">
                            <input type="text" name="czphone" style="display: none" id="czphone">
                            <input type="password" placeholder="新密码(最少六位)" onblur="verify.PasswordLenght(this)"
                                   id="password1" minlength="6" name="czpass"/>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="确认密码" onblur="verify.Confirmpassword(this)"/>
                            <span class="error-notic">两次密码不匹配</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran pr">重置密码
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var _handle = '';//储存电话是否填写正确
    $(function () {
        $(".signup-form input").on("focus", function () {
            $(this).parent().addClass("border");
        });
        $(".signup-form input").on("blur", function () {
            $(this).parent().removeClass("border");
        })
        //步骤切换
        var _boxCon = $(".box-con");
        $(".move-login").on("click", function () {
            $(_boxCon).css({
                'marginLeft': 0
            })
        });
        $(".move-signup").on("click", function () {
            $(_boxCon).css({
                'marginLeft': -320
            })
        });
        $(".move-reset").on("click", function () {
            $(_boxCon).css({
                'marginLeft': -640
            })
        });

        //获取短信验证码
        var messageVerify = function () {
            $(".get-message").on("click", function () {
                if (_handle) {
                    s = document.getElementById('a2');
                    a = s.innerText;
                    if (a == '下一步') {
                        verificationCode(1);
                    }
                    else {
                        sendMessage(1);
                        $("#message-inf").fadeIn(100);
                        $(this).html('<a href="javascript:" id="a2">下一步</a>').addClass("move-addinf");
                    }

                }
            });
            $("#bu12").on("click", function () {
                if (_handle) {
                    s = document.getElementById('a4');
                    a = s.innerText;
                    if (a == '下一步') {
                        verificationCode(2);
                    }
                    else {
                        at = sendMessage(2);
                        if (at == '0') {
                            $("#message-inf1").fadeIn(100);
                            $(this).html('<a href="javascript:" id="a4">下一步</a>').addClass("move-addinf");
                        }
                    }

                }
            });
        }();
    });

    //表单验证
    function showNotic(_this) {
        $(_this).parents(".form-group").find(".error-notic").fadeIn(100);
    }//错误提示显示
    function hideNotic(_this) {
        $(_this).parents(".form-group").find(".error-notic").fadeOut(100);
    }//错误提示隐藏
    var verify = {
        verifyMobile: function (_this) {
            var validateReg = /^((\+?86)|(\(\+86\)))?1\d{10}$/;
            var _value = $(_this).val();
            if (!validateReg.test(_value)) {
                showNotic(_this);
                _handle = false;
            } else {
                hideNotic(_this);
                _handle = true;
            }
            return _handle
        },//验证手机号码
        PasswordLenght: function (_this) {
            var _length = $(_this).val().length;
            if (_length < 6) {
                showNotic(_this)
            } else {
                hideNotic(_this)
            }
        },//验证设置密码长度
        VerifyCount: function (_this) {
            var _value = $(_this).val().length;
            if (_value != 6) {
                showNotic(_this);
            } else {
                hideNotic(_this);
            }
        },//验证验证码
        Confirmpassword: function (_this) {
            password = document.getElementById('password1').value;
            conpassword = _this.value;
            if (password == conpassword) {
                hideNotic(_this);
            } else {
                showNotic(_this);
            }
        }
    }
</script>
</body>
</html>
